<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 24 24"
    preserveAspectRatio="xMidYMid meet"
    fill="none"
    role="presentation"
    ref="host"
  >
    <g><g data-follow-fill="currentColor" :fill="_fill"><path d="M17.384 6.873a.77.77 0 1 0-1.538 0v1.281h-1.282a.77.77 0 0 0 0 1.539h1.282v1.282a.77.77 0 0 0 1.538 0V9.693h1.282a.769.769 0 1 0 0-1.539h-1.282V6.873Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M23.024 9.25c0-3.411-1.52-5.956-3.887-6.882C16.948 1.509 14.32 2.15 12 4.322 9.68 2.152 7.052 1.51 4.863 2.368 2.496 3.294.976 5.838.976 9.248c0 2.174 1.159 4.31 2.602 6.15 1.458 1.86 3.292 3.524 4.822 4.766l.137.112C9.767 21.276 10.657 22 12 22s2.232-.723 3.463-1.723l.138-.112c1.53-1.241 3.363-2.907 4.821-4.766 1.443-1.84 2.602-3.976 2.602-6.148ZM12.562 5.936c2.166-2.316 4.41-2.764 6.016-2.137 1.607.63 2.908 2.472 2.908 5.45 0 1.653-.903 3.45-2.275 5.2-1.357 1.733-3.093 3.314-4.58 4.521-1.428 1.159-1.89 1.49-2.63 1.49-.742 0-1.204-.331-2.632-1.491-1.487-1.206-3.222-2.788-4.58-4.52-1.373-1.75-2.275-3.547-2.275-5.2 0-2.978 1.3-4.82 2.909-5.45 1.605-.627 3.85-.18 6.015 2.137a.77.77 0 0 0 1.124 0Z"/></g></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Health extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
